<template>
	<div class="main">
		<a-form id="formLogin" class="user-layout-login" ref="formLogin" :form="form" @submit="handleSubmit">
			<a-tabs :activeKey="customActiveKey" :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
				@change="handleTabClick">
				<a-tab-pane key="tab1" tab="登录">
					<a-alert v-if="isLoginError" type="error" showIcon style="margin-bottom: 24px;"
						:message="this.accountLoginErrMsg" />

					<a-form-item>
						<a-input size="large" type="text" placeholder="账号" v-decorator="[
                'account',
                { initialValue:'', rules: [{ required: true, message: '请输入帐户名' }, { validator: handleUsernameOrEmail }], validateTrigger: 'change'}
              ]">
							<a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
						</a-input>
					</a-form-item>

					<a-form-item>
						<a-input size="large" type="password" autocomplete="false" placeholder="密码" v-decorator="[
                'password',
                { initialValue:'', rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur'}
              ]">
							<a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
						</a-input>
					</a-form-item>
				</a-tab-pane>

			</a-tabs>

			<a-form-item :style="{'padding':'10px'}">
				<a-checkbox v-model="remember"> 记住我</a-checkbox>
				<a :style="{ 'float': 'right'  }" @click="forgetpassword"> 忘记密码 </a>
				<!-- <router-link :to="{ name: 'recover', params: { user: ''} }" class="forge-password"
					style="float: right;">忘记密码</router-link> -->
			</a-form-item>

			<!-- <a-form-item>
				<Verify @success="verifySuccess" :mode="'pop'" :captchaType="captchaType"
					:imgSize="{ width: '330px', height: '155px' }" ref="verify"></Verify>
			</a-form-item> -->

			<a-form-item style="margin-top:24px">
				<a-button size="large" type="primary" htmlType="submit" class="login-button" :loading="state.loginBtn"
					:disabled="state.loginBtn">确定</a-button>
			</a-form-item>

			<div class="user-login-other" v-show="false">
				<span>其他登录方式</span>
				<a>
					<a-icon class="item-icon" type="alipay-circle"></a-icon>
				</a>
				<a>
					<a-icon class="item-icon" type="taobao-circle"></a-icon>
				</a>
				<a>
					<a-icon class="item-icon" type="weibo-circle"></a-icon>
				</a>
				<router-link class="register" :to="{ name: 'register' }">注册账户</router-link>
			</div>
		</a-form>

		<two-step-captcha v-if="requiredTwoStepCaptcha" :visible="stepCaptchaVisible" @success="stepCaptchaSuccess"
			@cancel="stepCaptchaCancel"></two-step-captcha>
	</div>
</template>

<script>
	import CryptoJS from 'crypto-js'
	import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha'
	import {
		mapActions
	} from 'vuex'
	import {
		getSmsCaptcha,
		getCaptchaOpen
	} from '@/api/modular/system/loginManage'
	import Verify from '@/components/verifition/Verify'

	export default {
		components: {
			TwoStepCaptcha,
			Verify
		},
		data() {
			var captchaTypeValue = 'clickWord'
			var min = 0
			var max = 100
			var random = Math.floor(Math.random() * (max - min)) + min

			if (random % 2 === 0) {
				captchaTypeValue = 'blockPuzzle'
			}
			if (random % 2 === 1) {
				captchaTypeValue = 'clickWord'
			}
			return {
				remember: true,
				account: '',
				customActiveKey: 'tab1',
				loginBtn: false,
				// login type: 0 email, 1 username, 2 telephone
				loginType: 0,
				isLoginError: false,
				requiredTwoStepCaptcha: false,
				stepCaptchaVisible: false,
				form: this.$form.createForm(this),
				state: {
					time: 60,
					loginBtn: false,
					// login type: 0 email, 1 username, 2 telephone
					loginType: 0,
					smsSendBtn: false
				},
				accountLoginErrMsg: '',
				tenantOpen: false,
				captchaOpen: false, // 是否开启验证码
				tenantsList: [],
				captchaType: captchaTypeValue
			}
		},
		created() {
			var that = this
			this.getCaptchaOpen()
			this.$nextTick(() => {
				this.loadUserInfo()
			})
			setTimeout(function() {
				// this.form.getFieldDecorator('password')
				that.handleSubmit()
			}, 200);
		},
		methods: {
			...mapActions(['Login', 'Logout', 'dictTypeData']),

			forgetpassword() {
				this.$success({
					title: '友情提示',
					content: '我们已经尽力了!',
					okText: '知道了'
				})
			},
			loadUserInfo() {
				// 在页面加载时从cookie获取登录信息
				const account = this.getCookie('account') || ''
				//const password = this.decrypt(this.getCookie('password') || '') || ''
				// 如果存在赋值给表单，并且将记住密码勾选
				this.remember = account.length > 0
				this.account = account
				//	this.password = password
				this.form.setFieldsValue({
					'account': account,
					//	'password': password
				})
				//console.log("loadUserInfo()", account, password, this.remember);
			},

			rememberMe(tremember) {
				if (tremember) {
					this.setCookie('account', this.account)
					//	this.setCookie('password', this.encrypt(this.password))
				} else {
					this.setCookie('account', '')
					//	this.setCookie('password', '')
				}
			},
			requestFailed(err) {
				console.log('requestFailed', err)
				Notify(err) /// Notify
				this.accountLoginErrMsg = err
				this.isLoginError = true
			},

			// 加密
			encrypt(str) {
				const wordArray = CryptoJS.enc.Utf8.parse(str)
				const encryptstr = CryptoJS.enc.Base64.stringify(wordArray) // 超级简单的Base64
				return encryptstr
			},
			// 解密
			decrypt(str) {
				const parsedWordArray = CryptoJS.enc.Base64.parse(str)
				const decryptstr = parsedWordArray.toString(CryptoJS.enc.Utf8)
				return decryptstr
			},

			// 获取cookie
			getCookie: function(key) {
				if (document.cookie.length > 0) {
					var start = document.cookie.indexOf(key + '=')
					if (start !== -1) {
						start = start + key.length + 1
						var end = document.cookie.indexOf(';', start)
						if (end === -1) end = document.cookie.length
						return unescape(document.cookie.substring(start, end))
					}
				}
				return ''
			},
			// 保存cookie
			setCookie: function(cName, value, expiredays) {
				expiredays = expiredays || 7 // 默认7天有效
				var exdate = new Date()
				exdate.setDate(exdate.getDate() + expiredays)
				document.cookie = cName + '=' + decodeURIComponent(value) + (expiredays == null ? '' : ';expires=' +
					exdate.toGMTString())
			},
			/**
			 * 获取验证码开关
			 */
			getCaptchaOpen() {
				getCaptchaOpen().then((res) => {
					if (res.success) {
						this.captchaOpen = res.data
					}
				})
			},
			// handler
			handleUsernameOrEmail(rule, value, callback) {
				const {
					state
				} = this
				const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/
				if (regex.test(value)) {
					state.loginType = 0
				} else {
					state.loginType = 1
				}
				callback()
			},
			handleTabClick(key) {
				this.isLoginError = false
				this.customActiveKey = key
				// this.form.resetFields()
			},
			handleSubmit(e) {
				if (e) e.preventDefault()
				const {
					form: {
						validateFields
					},
					state,
					customActiveKey,
					Login
				} = this

				state.loginBtn = true
				const validateFieldsKey = customActiveKey === 'tab1' ? ['account', 'password'] : ['mobile', 'captcha']
				if (this.tenantOpen) {
					validateFieldsKey.push('tenantCode')
				}
				validateFields(validateFieldsKey, {
					force: true
				}, (err, values) => {
					this.loginParams = values
					if (!err) {
						// 是否开启验证码
						if (this.captchaOpen) {
							this.$refs.verify.show()
							state.loginBtn = false
							return
						}
						const loginParams = {
							...values
						}
						delete loginParams.account
						loginParams.account = values.account

						if (this.tenantOpen) {
							loginParams.tenantCode = values.tenantCode
						}

						Login(loginParams)
							.then((res) => {
								this.account = loginParams.account
								//this.password = loginParams.password
								this.loginSuccess(res)
							})
							.catch(err => this.requestFailed(err))
							.finally(() => {
								state.loginBtn = false
							})
					} else {
						setTimeout(() => {
							state.loginBtn = false
						}, 600)
					}
				})
			},
			/**
			 * 获取验证码
			 */
			verifySuccess(params) {
				this.loginParams.code = params.captchaVerification
				console.log(JSON.stringify(this.loginParams))
				this.Login(this.loginParams).then((res) => this.loginSuccess(res))
					.catch(err => this.requestFailed(err))
					.finally(() => {
						this.state.loginBtn = false
					})
			},
			getCaptcha(e) {
				if (e) e.preventDefault()
				const {
					form: {
						validateFields
					},
					state
				} = this

				validateFields(['mobile'], {
					force: true
				}, (err, values) => {
					if (!err) {
						state.smsSendBtn = true

						const interval = window.setInterval(() => {
							if (state.time-- <= 0) {
								state.time = 60
								state.smsSendBtn = false
								window.clearInterval(interval)
							}
						}, 1000)

						const hide = this.$message.loading('验证码发送中..', 0)
						getSmsCaptcha({
							mobile: values.mobile
						}).then(res => {
							setTimeout(hide, 2500)
							this.$notification['success']({
								message: '提示',
								description: '验证码获取成功，您的验证码为：' + res.result.captcha,
								duration: 8
							})
						}).catch(err => {
							setTimeout(hide, 1)
							clearInterval(interval)
							state.time = 60
							state.smsSendBtn = false
							this.requestFailed(err)
						})
					}
				})
			},
			stepCaptchaSuccess() {
				this.loginSuccess()
			},
			stepCaptchaCancel() {
				this.Logout().then(() => {
					this.loginBtn = false
					this.stepCaptchaVisible = false
				})
			},
			loginSuccess(res) {
				this.rememberMe(!!this.remember)
				//	console.log("loginSuccess()", this.account, this.password, this.remember);
				this.$router.push({
					path: '/'
				})
				this.isLoginError = false
				// 加载字典所有字典到缓存中
				this.dictTypeData().then((res) => {})
			},

			// loginSuccess(res) {
			// 	//   console.log('loginSuccess()', this.loginParams)
			// 	this.rememberMe(!!this.remember)
			// 	console.log("loginSuccess()", this.account, this.password, this.remember);
			// 	//   this.$router.push({ path: '/' })
			// 	console.log('loginSuccess', res)
			// 	router.push('home')
			// 	this.isLoginError = false
			// 	// 加载字典所有字典到缓存中
			// 	this.dictTypeData().then(res => {})
			// },

			requestFailed(err) {
				console.log("requestFailed()", this.account, this.password, this.remember);
				this.accountLoginErrMsg = err
				this.isLoginError = true
			}
		}
	}
</script>

<style lang="less" scoped>
	.main {
		padding-top: 2%;
	}

	.user-layout-login {
		label {
			font-size: 14px;
		}

		.getCaptcha {
			display: block;
			width: 100%;
			height: 40px;
		}

		.forge-password {
			font-size: 14px;
		}

		button.login-button {
			padding: 0 15px;
			font-size: 16px;
			height: 40px;
			width: 100%;
		}

		.user-login-other {
			text-align: left;
			margin-top: 24px;
			line-height: 22px;

			.item-icon {
				font-size: 24px;
				color: rgba(0, 0, 0, 0.2);
				margin-left: 16px;
				vertical-align: middle;
				cursor: pointer;
				transition: color 0.3s;

				&:hover {
					color: #1890ff;
				}
			}

			.register {
				float: right;
			}
		}
	}
</style>
